<script setup lang="ts">
  import {ref} from 'vue'
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import { registrationNoticeInfo } from '@/api/training'
  import { msg } from '@/utils/tools'
  const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)
  const noticeDataInfo = ref({})
  const agreeToExplain = ref(false)
  const countdown = ref(10)
  const isBottom = ref(false)
  let intervalTime = null
  onLoad((options:any) => {
    // registrationNoticeInfo({id:options.id}).then(res => {
    //   noticeDataInfo.value = res.data
    // })
    let query = wx.createSelectorQuery();
    intervalTime = setInterval(() => {
      if(countdown.value <= 0){
        clearTimeout(intervalTime)
        agreeToExplain.value = true
      }else{
        countdown.value--
        agreeToExplain.value = false
      }
      query.select('.notice-body').boundingClientRect(rect=>{
        let height = rect.height;
        if (uni.getSystemInfoSync().screenHeight >= height){
          isBottom.value = true
        }
      }).exec();
    },1000)
  })

  onUnload(() => {
    if(intervalTime){
      clearTimeout(intervalTime)
    }
  })

  const sbmitClick = () => {
    if(agreeToExplain.value && isBottom.value){
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      uni.navigateBack({
        delta:1,
        success:() => {
          // #ifndef H5
          prevPage?.$vm?.agreeNotice()
          // #endif
          // #ifdef H5
          prevPage.$.setupState.agreeNotice()
          // #endif
        }
      })
    }else if(!isBottom.value){
      msg('请先阅读完报名须知后确认',false)
    }else if(!agreeToExplain.value){
      msg('请等待倒计时完成后确认',false)
    }
  }

  const scrollTolower = () => {
    isBottom.value = true
  }
  const linkTap = (data:any) => {
  }
</script>

<template>
  <scroll-view class='page-body' style="height: 100vh" :scroll-y="true" :lower-threshold="2" @scrolltolower="scrollTolower">
    <xx-title title="报名须知"/>
    <view class="notice-body">
      <view class="notice-title">《报名须知》</view>
      <view class="notice-content">
		<view class="content">
			<view>保险保障内容：</view>
			<view>意外身故及残疾保障 100000元</view>
			<view>意外医疗(无免赔额) 20000元</view>
			<view>猝死保障 100000元</view>
			<view>意外伤害住院补贴(30天) 80元/天</view>
			<view>公共交通意外伤害-飞机 50000元</view>
			<view>公共交通意外伤害-轮船 50000元</view>
			<view>公共交通意外伤害-火车(地铁、轻轨) 50000元</view>
			<view>公共交通意外伤害-汽车 50000元</view>
			<view>保险费用 12元</view>
		</view>
      </view>
      <view class="bottom-fixed" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
        <view class="seizeASeat"></view>
      </view>
      <view class="bottom-btn" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
        <view class="btn">
          <view class="personal-registration" @click="sbmitClick" :class="{ disabled:!agreeToExplain || ! isBottom }">{{countdown > 0 ? `(${countdown}s)`:''}}我已阅读《报名须知》并知晓同意</view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
.notice-body{
  background-color: #FFFFFF;
  padding: 20rpx;
  .notice-title{
    color: #000;
    font-size: 42rpx;
    font-weight: 500;
    margin-top: 10rpx;
    text-align: center;
    margin-bottom: 20rpx;
  }
  .notice-content{
    width: 100%;
    white-space: pre-wrap;
    font-size:28rpx;
    line-height:1.8;
    color:#505363
  }
}

.bottom-fixed{
  padding-top: 14px;
  .seizeASeat{
    height: 138rpx;
  }
}
.bottom-btn{
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-left: 28rpx;
  padding-right: 28rpx;
  box-sizing: border-box;
  border-top: 1px solid #F1F2F4;
  padding-top: 14rpx;
  z-index: 10;
  background-color: #FFFFFF;
  .btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .personal-tak-care{
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #505363;
    margin-bottom: 10rpx;
    text{
      color: #1677FE;
    }
  }
  .personal-registration{
    background: #92C75B;
    color: #FFFFFF;
    border-radius: 16rpx;
    width:calc(100% - 20rpx);
    padding: 16rpx 0;
    letter-spacing: 2rpx;
    font-weight: 500;
    text-align: center;
    &.disabled{
      background-color: #E5E5E5;
      color:#818496;
    }
  }
  .content{
	  font-size:28rpx;
	  line-height:1.8;
	  color:#505363
	  // .lin{
		  
	  // }
  }
}
</style>
